import { useState, useEffect, CSSProperties } from 'react'
import { Button } from 'tdesign-react'

import styles from './index.module.less'

const DiceGame = (props: any) => {

  const [isStopped, setIsStopped] = useState<any>(true)
  const [point, setPoint] = useState<number>(0)

  useEffect(() => {

  }, [isStopped])

  const onStartClick = () => {
    setIsStopped(false)
  }

  const onStopClick = () => {
    if (!isStopped) {
      let _point = Math.floor(Math.random() * 6) + 1
      console.log('point', _point)
      setPoint(_point)
    } else {
      setPoint(0)
    }
    setIsStopped(true)
  }

  const getAnimation = () => {
    if (!isStopped) {  //播动画1
      return `${styles.diceBlock} ${styles.animationActive}`
    } else {  //不播动画1
      if (point) { //播动画2
        return `${styles.diceBlock} ${styles.animationPoint}`
      } else { //啥也不播
        return `${styles.diceBlock} ${styles.pause}`
      }
    }
  }

  return <div className={styles.diceGame}>
    <div className={getAnimation()} style={{'--animation-name': styles[`dice-rotate-${point}`]} as CSSProperties}>
      <div className={styles.diceOne}></div>
      <div className={styles.diceTwo}></div>
      <div className={styles.diceThree}></div>
      <div className={styles.diceFour}></div>
      <div className={styles.diceFive}></div>
      <div className={styles.diceSix}></div>
    </div>
    <div className={styles.buttonBlock}>
      <Button onClick={onStartClick}>掷骰子</Button>
      <Button onClick={onStopClick} style={{ marginLeft: 20 }}>停止</Button>
    </div>
  </div>
}

export default DiceGame
